<template>
  <div class="home">
    <div>
      {{ $store.state.num }}
    </div>
    <div>
      {{num }}
    </div>
    <div>{{total}}</div>
    <div>{{myCount}}</div>
    <div>
      <button @click="handleClick1">点击</button>
    </div>
    <div>

      <button @click='handleClick2'>点击2</button>
    </div>
  </div>
</template>

<script>
// Vuex专门引入了一个函数简化状态获取操作
//将计算属性用mapState函数包裹，它会自动调用这个函数，并且自动指向$store.state里面的变量
import { mapState } from 'vuex'
export default {
  data () {
    return {
      count: 10,

    }
  },
  name: "Home",
  computed: {
    myCount () {
      return this.count + 100
    },
    ...mapState(['num', 'total'])
  },


  methods: {

    handleClick1 () {
      // this.num = this.num + 1
      // 点击按钮修改状态数据需要触发mutation
      this.$store.commit('updateNum', 1)
    },
    handleClick2 () {
      // this.num = this.num + 1
      // 点击按钮修改状态数据需要触发mutation
      this.$store.commit('updateTotal', 1)
    }
  }
  ,
};
</script>
<style scoped>
</style>
